<template>
  <!--员工管理/离职员工列表-->
  <div>
    <!--搜索栏-->
    <div style="margin: 50px auto;width: fit-content">
      <el-input v-model="filter.id" type="text" placeholder="请输入搜索的员工号" style="width: 800px;margin-right: 10px" @input="searchDebounce"/>
      <el-button type="primary" style="margin: 10px 5px" icon="el-icon-search" @click="search()">搜索</el-button>
      <el-button type="info" style="margin: 10px 5px" icon="el-icon-setting" @click="handleAdvancedSearch()">高级搜索
      </el-button>
      <el-button type="info" style="margin: 10px 5px" icon="el-icon-delete" @click="handleClear()">清除筛选</el-button>
    </div>
    <!--表单-->
    <div>
      <el-dialog :title="title" :visible.sync="dialogFormVisible" center>
        <el-form :model="form">
          <el-form-item label="员工号" :label-width="formLabelWidth">
            <el-tooltip v-show="title==='高级搜索'" class="item" effect="dark" content="精确匹配" placement="top-start">
              <i class="el-icon-question" style="margin-right: 20px" />
            </el-tooltip>
            <el-input v-model="form.id" autocomplete="off" :disabled="title!=='高级搜索'" style="width: 80%" />
          </el-form-item>
          <el-form-item label="真实姓名" :label-width="formLabelWidth">
            <el-tooltip v-show="title==='高级搜索'" class="item" effect="dark" content="模糊匹配" placement="top-start">
              <i class="el-icon-question" style="margin-right: 20px" />
            </el-tooltip>
            <el-input v-model="form.realName" autocomplete="off" style="width: 80%" />
          </el-form-item>
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-tooltip v-show="title==='高级搜索'" class="item" effect="dark" content="模糊匹配" placement="top-start">
              <i class="el-icon-question" style="margin-right: 20px" />
            </el-tooltip>
            <el-input v-model="form.username" autocomplete="off" style="width: 80%" />
          </el-form-item>
          <el-form-item v-show="title === '添加员工'" label="密码" :label-width="formLabelWidth">
            <el-input v-model="form.password" show-password autocomplete="off" style="width: 80%" />
          </el-form-item>
          <el-form-item v-show="title === '添加员工'" label="确认密码" :label-width="formLabelWidth">
            <el-input v-model="form.confirm" show-password autocomplete="off" style="width: 80%" />
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-tooltip v-show="title==='高级搜索'" class="item" effect="dark" content="精确匹配" placement="top-start">
              <i class="el-icon-question" style="margin-right: 20px" />
            </el-tooltip>
            <el-select v-model="form.gender" placeholder="请选择性别">
              <el-option label="男" :value="1" />
              <el-option label="女" :value="0" />
              <el-option label="保密" :value="2" />
              <el-option v-show="title==='高级搜索'" label="任意" :value="null" />
            </el-select>
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth">
            <el-tooltip v-show="title==='高级搜索'" class="item" effect="dark" content="模糊匹配" placement="top-start">
              <i class="el-icon-question" style="margin-right: 20px" />
            </el-tooltip>
            <el-input v-model="form.phone" autocomplete="off" style="width: 80%" />
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth">
            <el-tooltip v-show="title==='高级搜索'" class="item" effect="dark" content="模糊匹配" placement="top-start">
              <i class="el-icon-question" style="margin-right: 20px" />
            </el-tooltip>
            <el-input v-model="form.email" autocomplete="off" style="width: 80%" />
          </el-form-item>
          <el-form-item v-show="title!=='高级搜索'" label="头像" :label-width="formLabelWidth">
            <el-upload
              class="avatar-uploader"
              :action="this.$api.img.adminAvatar"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="form.avatar" v-lazy="this.$api.img.server + form.avatar" class="avatar">
              <i v-else id="avatar-uploader-icon" class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleDialogConfirm()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!--表格内容-->
    <el-table
      :data="rows"
      style="width: 100%"
      border
    >
      <el-table-column
        prop="id"
        label="员工号"
        width="120"
        align="center"
      />
      <el-table-column
        prop="realName"
        label="真实姓名"
        width="180"
        align="center"
      />
      <el-table-column
        prop="username"
        label="用户名"
        width="180"
        align="center"
      />
      <el-table-column
        prop="gender"
        label="性别"
        width="80"
        :formatter="formatGender"
        align="center"
      />
      <el-table-column
        prop="phone"
        label="手机"
        width="180"
        align="center"
      />
      <el-table-column
        prop="email"
        label="邮箱"
        align="center"
        width="180"
      />
      <el-table-column
        prop="gmtModified"
        label="离职时间"
        width="220"
      >
        <template slot-scope="scope">
          <el-date-picker
            v-model="scope.row.gmtModified"
            type="date"
            placeholder="无效日期"
            :disabled="true"
            style="width: 200px"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
      >
        <template slot-scope="{row,$index}">
          <el-button type="success" icon="el-icon-refresh-right" size="mini" @click="handleRecover(row,$index)">恢复
          </el-button>
          <el-button type="info" icon="el-icon-lock" size="mini" @click="handleResetPass(row,$index)">重置密码</el-button>
          <el-button type="warning" icon="el-icon-edit" size="mini" @click="handleModify(row,$index)">修改</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(row,$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页器-->
    <el-pagination
      :current-page="index"
      :page-sizes="[3, 5, 10, 20]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="margin-top: 20px;text-align: center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { debounce } from 'lodash'
export default {
  name: 'DeletedTable',
  data() {
    return {
      rows: [],
      filter: {
        id: '',
        realName: '',
        username: '',
        email: '',
        phone: '',
        gender: null
      },
      formLabelWidth: '120px',
      title: '',
      dialogFormVisible: false,
      total: 100,
      size: 5,
      index: 1,
      form: {
        id: '',
        realName: '',
        username: '',
        email: '',
        phone: '',
        gender: '',
        avatar: ''
      }
    }
  },
  created() {
    this.search()
  },
  methods: {
    searchDebounce: debounce(function() {
      this.search()
    }, 300),
    async handleResetPass(row, index) {
      const res = await this.$api.employee_active.resetPass(row.id)
      await this.$alert('请记录新密码：' + res.data.password, '新密码', {
        confirmButtonText: '确定',
        callback: action => {
          this.$message({
            type: 'success',
            message: `密码重置成功`
          })
        }
      })
    },
    async handleDelete(row, index) {
      this.$confirm('此操作将永久删除该员工, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await this.$api.employee_delete.deleted({ id: row.id })
        this.$message({
          type: 'success',
          message: res.message
        })
        this.search()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleClear() {
      this.filter = {
        id: '',
        realName: '',
        username: '',
        email: '',
        phone: '',
        gender: null
      }
      this.search()
    },
    handleAvatarSuccess(res) {
      this.form.avatar = res.data.address
    },
    handleAdvancedSearch() {
      this.title = '高级搜索'
      this.form = this.filter
      this.dialogFormVisible = true
    },
    handleModify(row, index) {
      this.title = '编辑员工'
      this.dialogFormVisible = true
      this.form = row
    },
    async handleInvalid(row, index) {
      const res = await this.$api.employee_delete.valid({ id: row.id })
      this.search()
      this.$message.success(res.message)
    },
    search() {
      const that = this
      this.$api.employee_delete.search(this.filter, this.index, this.size).then(response => {
        // console.log(response.data.rows)
        that.rows = response.data.rows
        // console.log(that.rows)
        // console.log(response.data.total)
        that.total = response.data.total
        // console.log(that.total)
      })
    },
    async handleRecover(row, index) {
      const res = await this.$api.employee_delete.valid({ id: row.id })
      this.$message.success(res.message)
      this.search()
    },
    handleSizeChange(val) {
      this.size = val
      this.search()
    },
    handleCurrentChange(val) {
      this.index = val
      this.search()
    },
    beforeAvatarUpload(file) {
      const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png')
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    async handleDialogConfirm() {
      switch (this.title) {
        case '编辑员工': {
          const edit = await this.$api.employee_active.update({ id: this.form.id }, this.form)
          this.search()
          this.$message.success(edit.message)
          break
        }
        case '高级搜索': {
          this.filter = this.form
          this.search()
          break
        }
        default: {
          this.$message.error('系统故障！')
        }
      }
      this.dialogFormVisible = false
    },
    formatGender(row, column) {
      switch (row.gender) {
        case 1:
          return '男'
        case 0:
          return '女'
        default:
          return '未知'
      }
    }
  }
}
</script>

<style scoped>

</style>
